<!--跟XX会员共同参与的聚会-->
<template>
  <f7-page no-toolbar class="background-color: #f4f5f5;"
           infinite
           :infinite-distance="50"
           :infinite-preloader="showPreloader"
           @infinite="loadMore"
  >
    <f7-navbar title="我跟TA共同参与的" back-link="Back">
    </f7-navbar>
    <f7-block class="margin-top">滑动可参与评价哦</f7-block>

<!--    <f7-list media-list style="margin-top: 0px;" >
      <f7-list-item
                    title="2019东莞自驾游，新年第一波参与" after="评价"
                     subtitle="时间:2019-09-09 15:00"
                     link="#"
                    >
        <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="60"/>

        &lt;!&ndash;<f7-link icon-f7="heart"  target="_blank" text="评价" ></f7-link>&ndash;&gt;
      </f7-list-item>
      <f7-list-item  chevron-center
                     title="2019东莞自驾游，新年第一波参与" after="评价"
                     link="#"
                     subtitle="时间:2019-09-09 15:00">

        <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="60"/>

        &lt;!&ndash;<f7-link icon-f7="heart"  target="_blank" text="评价" ></f7-link>&ndash;&gt;
      </f7-list-item>

    </f7-list>-->

    <f7-list media-list style="margin-top: -20px;">
      <f7-list-item chevron-center swipeout v-for="(item, index) in 10" :key="index"
                    title="2019东莞自驾游"
                    link="/activity/actDetail/"
                    subtitle="时间:2019-09-09 15:00">
        <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="60"/>
        <f7-swipeout-actions right>
          <f7-swipeout-button color="blue" href="/comment/commentMemberEdit/">评价TA</f7-swipeout-button>
        </f7-swipeout-actions>
        <!--<f7-link icon-f7="heart"  target="_blank" text="评价" ></f7-link>-->
      </f7-list-item>
    </f7-list>


<!--    <f7-toolbar bottom>
      <f7-link icon-f7="heart" style="margin-left: 10%;" target="_blank" text="收藏TA" ></f7-link> &lt;!&ndash;heart_fill&ndash;&gt;
      <f7-link icon-f7="star_fill" style="margin-right: 10%;" target="_blank" text="关注TA" ></f7-link> &lt;!&ndash;star_fill&ndash;&gt;
    </f7-toolbar>-->

  </f7-page>
</template>

<script>
  import labelListEdit from '../../components/labelListEdit.vue';


  export default {
    components: {labelListEdit},
    data() {
      return {
        showPreloader: true,
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        swiperParams: {
          // speed: 500,
          loop: true,
          // height:600,
          // autoplay: {
          //   delay: 1500,
          // },
          direction:'vertical'
          // preventLinksPropagation: false   // 阻止点击事件冒泡
        },
      };
    },
    methods: {
      refresh(event, done) {
        setTimeout(() => {
          // todo
          done();
        }, 1000);
      },

      loadMore() {
        const self = this;
        if (!self.allowInfinite) return;
        self.allowInfinite = false;

        setTimeout(() => {
          if (self.items.length >= 200) {
            self.showPreloader = false;
            return;
          }

          const itemsLength = self.items.length;

          for (let i = 1; i <= 20; i += 1) {
            self.items.push(itemsLength + i);
          }

          self.allowInfinite = true;
        }, 1000);
      },

    }
  }
</script>
